<template>

	<div ref="pdom" class="cam-box" v-show="_showed" onmousedown="javascript:hMouseDown(event);">
		<div class="head">

			<label style="letter-spacing:2px">{{showName||"... ..."}}</label>
			<!-- <a href="javascript:;" class=" " style="pointer-events: all;" @click="hProject">{{isProj?"关闭":"查看"}}投影</a> -->
			<div class="btn bclose" @click="hClose">Ｘ</div>
		</div>

		<div class="body">
			<div :class="{'rcx':hasRcx}">
				<video id="videoDomMat" ref="domVideo" class="player" controls="controls" v-show="!isProj">

				</video>
				<video ref="domRCX" class="player" controls="controls" v-show="hasRcx">

				</video>

			</div>
			<div class="ctrl">
				<div class="ybg" v-if="cCtrl.dat">
					<div :class="cCtrl.dat[4].cls" @mousedown="cCtrl.dat[4].hB(icode)" @mouseup="cCtrl.dat[4].hE(icode)">
						<!-- {{cCtrl.dat[4].name}} -->
					</div>
					<div :class="cCtrl.dat[2].cls" @mousedown="cCtrl.dat[2].hB(icode)" @mouseup="cCtrl.dat[2].hE(icode)">
						<!-- {{cCtrl.dat[2].name}} -->
					</div>
					<div :class="cCtrl.dat[3].cls" @mousedown="cCtrl.dat[3].hB(icode)" @mouseup="cCtrl.dat[3].hE(icode)">
						<!-- {{cCtrl.dat[3].name}} -->
					</div>
					<div :class="cCtrl.dat[5].cls" @mousedown="cCtrl.dat[5].hB(icode)" @mouseup="cCtrl.dat[5].hE(icode)">
						<!-- {{cCtrl.dat[5].name}} -->
					</div>
					<!-- v-for="btn in cCtrl?.dat" @mousedown="btn.hB(icode)" @mouseup="btn.hE(icode)"
					{{btn.name}} -->
				</div>
				<div class="zoom">

					<div :class="cCtrl.dat[0].cls" @mousedown="cCtrl.dat[0].hB(icode)" @mouseup="cCtrl.dat[0].hE(icode)">
						{{cCtrl.dat[0].name}}
					</div>
					<div :class="cCtrl.dat[1].cls" @mousedown="cCtrl.dat[1].hB(icode)" @mouseup="cCtrl.dat[1].hE(icode)">
						{{cCtrl.dat[1].name}}
					</div>
				</div>

				<div class="vb btn b" @click="hOpenAudio">广播</div>

			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		nextTick,
		computed,
		reactive,
		watch,
		ref,
		toRefs
	} from "vue";
	import {
		useStore
	} from "vuex";

	import {
		ElMessage
	} from "element-plus";

	import {
		Play
	} from "./m3u8Play.js";

	import {
		eCtrlType,
		CtrlCam
	} from "./ctrl.js";

	const store = useStore();

	const {
		datCam,
		openProj,
		datCamAreas,
		camName,
	} = toRefs(store.state);

	function hMap() {
		return window.__map;
	}
	const _showed = ref(false);
	const icode = ref("");
	const domv = ref("");
	const showName = ref("");
	let gArea = null;

	watch(camName, n => {
		if (gArea) {
			gArea.remove();
		}
		console.log("mapclick", n);
		if (!n) {
			//_showed.value = false;
			return;
		}
		pdom.value.style.transform = "translate(0px,0px)";
		hShowArea(n);


		showName.value = n;
		if (store.state.page_curr == 'set') {
			return;
		}
		_showed.value = true;
		console.log("准备预览", n);
		store.dispatch("asyncOpenCam", n);
	});
	//监控范围
	const hShowArea = (v) => {
		let n = v || showName.value;

		if (gArea) {
			gArea.remove();
		}
		let datArea = datCamAreas.value.find(t => t.Other == n);
		if (datArea) {
			let geojson = JSON.parse(datArea.Json);
			geojson.properties.datId = datArea.ID;
			gArea = hMap().hAddObject(geojson);
		} else {
			console.log("无区域数据", n, datArea);
		}

	}

	const bpath = "/GetHIKCam.ashx?title=GetCamPrev&protocol=hlss&streamType=1&code=";

	const domVideo = ref(),
		domRCX = ref();

	let cPlay = null,
		cPlayRcx = null; //播放器
	const cCtrl = new CtrlCam(); //云台控制器
	
	//23.7.4 整合版 
	// hMap().hApi("hServerCamPlay", [code], (rs) => {
	// 		let url = rs[0].workers[0].hlsUrl;
	// 		console.log("监控播放", url, rs);
	// 		cPlay.hPlay(url); 
	// 		isPlay.value = true; 
	// 		busy = false;
	// 	});
		
	const hasRcx = ref(false);
	watch(datCam, cam => {
		if (cam == null) {
			return;
		}
		if (!cPlay) {
			cCtrl.hSetApi(store.state.apiCam);
			cPlay = new Play({
				videoDom: domVideo.value
			});
			cPlay.onStop = () => {
				store.state.datCam = null;
			};

			cPlayRcx = new Play({
				videoDom: domRCX.value
			});
		}
		hShow();
		hasRcx.value = cam.code2 ? true : false;
		let code = cam.cameraIndexCode;
		icode.value = code;
		let path = `${bpath}${code}`;
		//console.log("",path);
		store.state.apiCam.hGet(path, "", d => {
			let url = d.data?.url;
			console.log("地址获取 返回", d.data, path);
			if (url) {
				cPlay.hPlay(url);
			} else {

			}
		});

		//热成像，红外
		if (cam.code2) {

			path = `${bpath}${cam.code2}`;
			//console.log("",path);
			store.state.apiCam.hGet(path, "", d => {
				let url = d.data?.url;
				console.log("地址获取 红外", d.data, path);
				if (url) {
					cPlayRcx.hPlay(url);
				} else {

				}
			});
		}
	});
	//投影开启
	watch(openProj, isproj => {
		if (isproj) {
			_showed.value = false;
		} else {
			cPlay?.hStop();
			cPlayRcx?.hStop();
		}
	})
	watch(_showed, s => {
		isProj.value = false;
		if (gArea && !s && !openProj.value) {
			gArea.remove();
		}
	})


	//查看投影
	let gProj = null;
	const isProj = ref(false);
	const hProject = () => {
		let n = showName.value; // camName.value;
		if (gArea) {
			gArea.remove();
		}
		if (gProj) {
			gProj.remove();
		}
		if (isProj.value) {
			isProj.value = false;
			hShowArea(n);
			return;
		}
		let datArea = datCamAreas.value.find(t => t.Other == n);
		isProj.value = datArea ? true : false;
		if (datArea) {

			let geojson = JSON.parse(datArea.Json);
			let parr = geojson.geometry.coordinates;

			console.log("投影区域数据", parr);
			let v = domVideo.value;
			gProj = hMap().hSetProjection(parr, v);

		} else {
			console.log("无区域数据", n, datArea);
		}
	}
	watch(isProj, v => {
		if (!v) {
			gProj.remove();
		}
	})

	const hClose = () => {
		store.state.openProj = false;
		_showed.value = false;
		store.state.camName = "";
		cPlay?.hStop();
		cPlayRcx?.hStop();
	}

	const pdom = ref();
	const hShow = () => {
		_showed.value = true;
		pdom.value.style.transform = 'translate(0,50px)';
	}

	const hOpenAudio = () => {
		store.state.datBroadName = camName.value;
		store.state.showAudio = true;
		console.log("打开广播", camName);
		//store.commit("hSetAudio", camName);
	}

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	const hFn = () => {

	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hFn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dat: {
			type: Object
		}, //概况
	});
</script>


<style scoped lang="scss">
	.cam-box {
		position: absolute;
		height: 300px;
		z-index: 2;
		top: 280px;
		right: 460px;
		color: #eee;
		font-size: 20px;
		background-color: rgb(30 58 88 / 73%);
		border-radius: 10px;
		border: 2px solid #2a67c29a;

		.head {
			height: 30px;
			line-height: 26px;
			pointer-events: none;

			a {
				font-size: 13px;
				margin: 0 12px;
			}

			.bclose {
				pointer-events: all;
				float: right;
				line-height: 16px;
				margin: 6px 12px 0;
				height: 30px;
				width: 26px;
				color: #eee;
				background: rgba(30, 58, 88, 0.83);
				transform: scaleY(0.8);
				display: flex;
				justify-content: center;
				font-size: 20px;
				font-family: "";
				border: 1px solid #7e8795;
			}

			.bclose:hover {
				color: red;
			}
		}

		.body {
			width: 100%;
			height: calc(100% - 50px);
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 12px;
			margin: 0 auto;
		}

		.ctrl {
			width: 180px;
			height: 100%;
			font-size: 18px;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			background: #03345faa;
			border-radius: 10px;
			padding: 8px;
			margin-left: 8px;

			>div {
				// background-color: #aa5500;
				margin: 3px;
				padding: 3px 6px;
			}


			.ybg {
				width: 126px;
				height: 126px;
				background-image: url(/imgs/hkvideo/dir-bg.png);
				background-size: 100% 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-content: space-around;
				justify-content: space-around;
				transform: rotate(315deg);
			}

			.vb {
				background-size: calc(100% - 2px) calc(100% - 2px);
				background-position: center;
				background-repeat: no-repeat;
			}

			.vb:hover {
				box-shadow: 1px 1px 3px black;
			}

			.ybg .vb:hover {
				box-shadow: unset;
				filter: drop-shadow(1px 2px 3px black);
			}

			.zoom {
				display: flex;
				height: 40px;
				line-height: 40px;
				width: 100%;
				padding: 0;
				margin: 0;
				color: #58D2FF;
			}

			.v-dir {
				background-image: url(/imgs/hkvideo/dir.png);
				width: 20px;
				height: 28px;
				margin: 10%;
				cursor: pointer;
			}



			.v-up {
				transform: rotate(132deg)
			}

			.v-down {
				transform: rotate(315deg);
			}

			.v-left {
				transform: rotate(45deg)
			}

			.v-right {
				transform: rotate(227deg);
			}

			.v-in,
			.v-out {
				width: 50%;
				text-align: right;
				height: 100%;
				padding-right: 10px;
				background-size: auto;
				background-position: left;
				background-position-x: 10px;
				background-color: #5981bd5a;
				border-radius: 10px;
				margin: 0 2px;
			}

			.v-in {
				background-image: url(/imgs/hkvideo/s-.png);
			}

			.v-out {
				background-image: url(/imgs/hkvideo/s.png);
			}

		}

		.rcx {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.player {
			width: 350px;
			height: 100%;
			margin: 0;
			object-fit: fill;
			background-color: #222;
			border: 2px solid #226ad59a;
			margin: 0 1px;
		}

		.btn.b {
			font-size: 18px;
			width: 100%;
			height: 42px;
			line-height: 36px;
			right: 10px;
			bottom: 6px;
			border-radius: 10px;


			background: #5981bd5a;
			// url(/imgs/hkvideo/bobg.png);
			background-size: calc(100% + 2px) calc(100% + 2px);
			background-position: center;
			letter-spacing: 6px;
			color: #98E8FB;
			font-weight: bold;
		}

		.btn.b:hover {
			color: #04ff00;
		}

		label {
			font-size: 14px;
			letter-spacing: 1px;
		}
	}
</style>